<template>
    <div class="role">
        <el-button type="primary" style="margin: 10px 0;" @click="openadd">添加</el-button>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-row v-for="item in props.row.children" :key="item.id">
                        <el-col :span="4">
                            <!-- <template ></template> -->
                            <el-tag closable @close="handleClose(props.row.id, item.id)">
                                {{ item.authName }}
                            </el-tag>
                        </el-col>
                        <el-col :span="20">
                            <el-row v-for="it in item.children" :key="it.id">
                                <el-col :span="12">
                                    <el-tag closable type="success" @close="handleClose(props.row.id, it.id)">{{
                                        it.authName
                                    }}</el-tag>
                                </el-col>
                                <el-col :span="12">
                                    <el-row v-for="ele in it.children" :key="ele.id">
                                        <el-col :span="24">
                                            <el-tag closable type="warning"
                                                @close="handleClose(props.row.id, ele.id)">{{ ele.authName }} </el-tag>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </template>
            </el-table-column>
            <el-table-column type="index" label="#">
            </el-table-column>
            <el-table-column label="角色名称" prop="roleName">
            </el-table-column>
            <el-table-column label="角色描述" prop="roleDesc">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" @click="editroleslist(scope.row)" circle></el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="delrightlist(scope.row.id)"
                        circle></el-button>
                    <el-button type="warning" icon="el-icon-setting" @click="dialoghandel(scope.row)"
                        circle></el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 对话框 -->
        <el-dialog title="分配权限" :visible.sync="dialogFormVisible">
            <el-tree :data="rightlist" show-checkbox node-key="id" :default-expanded-keys="k" :default-checked-keys="k"
                :props="defaultProps" ref="tree">
            </el-tree>
            <el-button type="primary" @click="okrightshandel">确认分配</el-button>
        </el-dialog>
        <!-- 添加修改对话框 -->
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible1">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="名称" prop="roleName">
                    <el-input v-model="ruleForm.roleName"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="roleDesc">
                    <el-input v-model="ruleForm.roleDesc"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { getroleslist, getrightlist, editrightlist, addrightlist, delrightlist, editrightslist, deleteright } from '../../utlis/api/roles/rolesapi'
export default {
    data() {
        return {
            tableData: [],
            dialogFormVisible: false,
            defaultProps: {
                children: 'children',
                label: 'authName'
            },
            rightlist: [],
            right: [],
            rid: '',
            dialogFormVisible1: false,
            k: [],
            ruleForm: {
                roleName: '',
                roleDesc: ''
            },
            rules: {
                roleName: [
                    { required: true, message: '请输入名称', trigger: 'blur' }
                ],
                roleDesc: [
                    { required: true, message: '请输入描述', trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        getrolelist() {
            getroleslist().then((res) => {
                console.log(86, res);
                this.tableData = res.data.data
            })
        },
        dialoghandel(row) {
            console.log(89, row);
            this.dialogFormVisible = true
            this.right = row.id
            var arr = []
            getrightlist().then((res) => {
                console.log(94, res, row.children);
                if (res.data.meta.status === 200) {
                    this.rightlist = res.data.data
                    function fn(row) {
                        if (!row.children) {
                            return arr.push(row.id)
                        }
                        row.children.forEach(item => {
                            return fn(item)
                        })
                    }
                    fn(row)
                    this.k = arr
                }
            })
        },
        okrightshandel() {
            var arr1 = this.$refs.tree.getCheckedKeys()
            var arr2 = this.$refs.tree.getHalfCheckedKeys()
            let arr = [...arr1, ...arr2].join(',')
            console.log(113, arr);
            editrightlist({ id: this.right, rids: arr }).then((res) => {
                console.log(112, res);
                this.getrolelist()
                this.dialogFormVisible = false
            })
        },
        openadd() {
            this.dialogFormVisible1 = true
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.rid) {
                        editrightslist(this.ruleForm).then((res) => {
                            // console.log(168, res);
                            this.getrolelist()
                            this.dialogFormVisible1 = false
                        })
                    } else {
                        addrightlist(this.ruleForm).then((res) => {
                            console.log(149, res);
                            this.dialogFormVisible1 = false
                            this.getrolelist()
                        })
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        delrightlist(id) {
            delrightlist(id).then((res) => {
                console.log(161, res);
                this.getrolelist()
            })
        },
        editroleslist(row) {
            this.dialogFormVisible1 = true
            this.rid = row.id
            this.ruleForm = row
        },
        handleClose(id, rid) {
            deleteright({ id: id, rid: rid }).then((res) => {
                console.log(179, res);
                this.getrolelist()
            })
        }
    },
    created() {
        this.getrolelist()
    }
}
</script>
<style lang="scss" scoped>

</style>